<template>
  <div id="fundDetails">
    <Header :showheaderLeft="false" :showBack="true" :isTitle="true" :showTitle="true"></Header>
    <div class="rootMain">
      <span class='look_detail' @click='toEarningsList'>查看收益详情</span>
      <div class="top">
        <div>
          <div @click='toEarningsList'>
            <p>{{$t('m.assets7')}}</p>
            <p>{{vcFundAsset}} VC</p>
            <p class='p3'>日收益率: {{dailyProfitRatio }}%</p>
            <p class='btn btn_1' @click.stop='goPage(2)'>转出</p>
          </div>
          <div @click='toEarningsList'>
            <p>{{$t('m.assets8')}}</p>
            <p>{{latestProfit }} CNN</p>
            <p class='p3' @click='toEarningsList'>总收益:{{totalProfit }} CNN</p>
            <p class='btn' @click.stop='goPage(1)'>转入</p>
          </div>
        </div>
      </div>

      <div class="content">
        <div class="tips">
          <p class="title">基金产品介绍</p>
          <p>1、用户的可提资产和理财资产（大于1000 VC）可存入基金资产中；</p>
          <p>2、基金资产中的VC每天可获得{{dailyProfitRatio }}%的收益，收益部分是以CNN形式发放，进入可提CNN资产中；</p>
          <p>3、收益最低至0.001元，低于此值部分不予计算；</p>
          <p>4、可以随时赎回，赎回部分进入可提资产中；</p>
        </div>
      </div>
      <!--<div class="img_box">
          <img src="@/assets/img/help/ios3.png" />
          <img src="@/assets/img/help/ios3.png" />
          <img src="@/assets/img/help/ios3.png" />
          <img src="@/assets/img/help/ios3.png" />
      </div>-->
    </div>
  </div>
</template>
<script>
import Services from "@/service/index.js";
import { mapMutations, mapState } from "vuex";
import Header from "@/components/header";
import axios from "axios";
import { Toast } from "vant";
export default {
  data() {
    return {
      loginToken: "",
      flage: false,
      net_worth: 2,
      userObj: {},
      dataTime: "",
      wdyUsdtOrder: {},
      wdyFinancial: {},
      vcFundAsset:'',//基金资产
      dailyProfitRatio:'',//收益利率百分比
      latestProfit:'',//昨日收益
      totalProfit:'',//总收益
      pageFrom:'',
    };
  },
  created() {
    this.loginToken = localStorage.getItem("token")
      ? localStorage.getItem("token")
      : "";
    // 理财信息
    Services.getUser({
      token: this.loginToken,
      lang: localStorage.getItem("language")
    }).then(res => {
      if (res.code == "0000") {
        this.userObj = res.user;
        localStorage.setItem("userObj", JSON.stringify(this.userObj));
      } else {
        Toast(res.msg);
        localStorage.removeItem("token");
        localStorage.removeItem("userObj");
        sessionStorage.setItem("loginBack", true);
        this.$router.push(`/login`);
      }
    });

    Services.getVcFundAsset({
      token: this.loginToken
    }).then(res => {
      console.log(res)
      if (res.code == "0000") {
      // vcFundAsset:'',//基金资产
      // dailyProfitRatio:'',//收益利率百分比
      // latestProfit:'',//昨日收益
      // totalProfit:'',//总收益
        this.vcFundAsset = res.vcFundAsset;
        this.dailyProfitRatio = res.dailyProfitRatio;
        this.latestProfit = res.latestProfit;
        this.totalProfit = res.totalProfit;
      } else {
        Toast(res.msg);
      }
    });
    this.changeTitle('产品详情');
    this.pageFrom = this.$route.query.from;
  },
  components: { Header },
  computed: {},
  mounted() {
    // this.drawLine([0.91, 1.05, 1.0, 0.89]);
  },
  methods: {
    ...mapMutations(["changeTitle", "changetabbarIndex"]),
    netWorth(id) {
      if (id == 1) {
        //近6个月
        this.net_worth = 1;
        this.drawLine([
          1.0,
          0.98,
          1.07,
          1.06,
          0.98,
          1.0,
          1.08,
          0.99,
          1.05,
          1.02,
          1.06,
          0.99
        ]);
      } else {
        //近一年
        this.net_worth = 2;
        this.drawLine([0.91, 1.05, 1.0, 0.89]);
      }
    },
    drawLine(data) {
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      let option = {
        //          title: { text: '在Vue中使用echarts' },
        //          tooltip: {},

        textStyle: {
          color: "#c0c1c4"
        },
        xAxis: {
          type: "category",
          axisLine: {
            lineStyle: {
              // 设置x轴颜色
              color: "#912CEE"
            }
          },
          axisLabel: {
            rotate: 40, // 旋转角度
            fontSize: "10",
            interval: 0 //设置X轴数据间隔几个显示一个，为0表示都显示
          },
          data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"]
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              // 设置y轴颜色
              color: "#912CEE"
            }
          },
          axisLabel: {
            fontSize: "12"
          }
        },
        series: [
          {
            data: data,
            type: "line",
            itemStyle: {
              normal: {
                // 拐点上显示数值
                label: {
                  show: true
                }
              }
            }
          }
        ]
      };
      myChart.setOption(option);
    },
    goPage(id) {
        if(id==1){//转入
            this.$router.push(`/withFundInto`);
        }else{
            this.$router.push(`/withFundTransfer`);
        }
    },
     toEarningsList() {      
        this.$router.push(`/earningsList`);
    },
    //预约、赎回
    appointment(id) {
      if (id == 1) {
        this.$router.push(`/reservation?id=${this.$route.query.id}`);
      } else {
        if (this.wdyUsdtOrder.extraData.closeFlag == "2") {
        } else {
          this.$router.push(`/redemption`);
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped type="text/scss">
#fundDetails {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  .rootMain {
    height: calc(100% - 0.88rem);
    top: 0.88rem;
    overflow-y: scroll;
    background: #fff;
    position: relative;
     >.look_detail{
       position: absolute;
       right:0;
       top:.3rem;
       width: 1.7rem;height: .6rem;line-height: .6rem;
       border-radius: .6rem;
       color: #fd6262;
       font-size: .24rem;
       text-align: center;
       display: inline-block;
       box-shadow: 0 0 .06rem #fd6262;
       background: #fff;
      
    }
    .top {
      margin-top: .4rem;
      padding: 0.8rem 0.3rem 0.1rem;
      min-height: 3.2rem;
      box-shadow: 0 0.05rem 0.1rem rgba(0, 0, 0, 0.07);
      > div {
        display: flex;
        margin-bottom: 0.3rem;
        position: relative;
        div {
          flex: 1;
          p {
            text-align: center;
            &:nth-of-type(2) {
              font-size: 0.4rem;
              padding-top: 0.2rem;
              font-weight: 700;
              color: #fd6262;
            }
          }
          .p3{
              margin-top: .3rem;
          }
          .btn{
                border-radius: .1rem;
                margin: .3rem auto 0;
                width: 2rem;
                height: 0.75rem;
                line-height: 0.75rem;
                font-size: 0.26rem;
                letter-spacing: 0.05rem;
                text-align: center;
                color: #fff;
                background: -webkit-gradient(linear, right top, left top, from(#ecca96), to(#d0a060));
                background: linear-gradient(right, #ecca96, #d0a060);
          }
          .btn_1{
          
              background: -webkit-linear-gradient(left, #43434e, #727181);
              background: -moz-linear-gradient(left, #43434e, #727181);
              background: -o-linear-gradient(left, #43434e, #727181);
              background: linear-gradient(to right, #43434e, #727181);
           }
        }
       
        &.detail {
          display: block;
          padding-top: 0.4rem;
          margin-bottom: 0.1rem;
          p {
            display: flex;
            span {
              flex: 1;
              display: flex;
              justify-content: center;
              padding-bottom: 0.1rem;
              &:nth-last-child {
                padding: 0;
              }
            }
          }
        }
      }
      > p {
        display: flex;
        justify-content: space-between;
        span {
          width: 30%;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 0.02rem solid #fff;
          padding: 0.06rem 0;
          border-radius: 0.08rem;
          font-size: 0.24rem;
        }
      }
    }

    h2 {
      font-size: 0.36rem;
      color: #c0c1c4;
      margin-bottom: 0.2rem;
      span {
        border: 0.02rem solid #fff;
        padding: 0.06rem 0.16rem;
        border-radius: 0.08rem;
        font-size: 0.24rem;
        color: #fff;
        margin: 0 0.1rem;
        &.active {
          background: #912cee;
        }
      }
    }
    .content {
    //   min-height: calc(100% - 3.4rem);
      padding: 0.2rem 0.3rem 0;
      .tips {
        font-size: 0.26rem;
        margin-bottom: 0.1rem;
        .title {
          margin-bottom: 0.2rem;
          font-size: 0.3rem;
        }
        p{
            margin-top: .1rem;
            line-height: .4rem;
        }
      }

    }
    >.img_box{
        padding: 0.3rem;
        >img{
            width: 100%;vertical-align: top;
        }
    }
  }
}
</style>